
<template>
  <div class="h-full flex flex-col bg-wechat-bg">
    <!-- 导航栏 -->
    <div class="nav-bar h-12 flex items-center justify-center px-4">
      <h1 class="text-lg font-semibold">发现</h1>
    </div>

    <!-- 功能列表 -->
    <div class="flex-1 overflow-y-auto">
      <div class="bg-white mb-2">
        <div class="flex items-center p-4 border-b border-gray-100" @click="openMoments">
          <div class="w-8 h-8 bg-wechat-green rounded flex items-center justify-center">
            <i class="fas fa-camera text-white text-sm"></i>
          </div>
          <span class="ml-3 text-gray-900">朋友圈</span>
          <i class="fas fa-chevron-right text-gray-400 ml-auto text-sm"></i>
        </div>
        
        <div class="flex items-center p-4 border-b border-gray-100">
          <div class="w-8 h-8 bg-wechat-green rounded flex items-center justify-center">
            <i class="fas fa-qrcode text-white text-sm"></i>
          </div>
          <span class="ml-3 text-gray-900">扫一扫</span>
          <i class="fas fa-chevron-right text-gray-400 ml-auto text-sm"></i>
        </div>

        <div class="flex items-center p-4 border-b border-gray-100">
          <div class="w-8 h-8 bg-wechat-green rounded flex items-center justify-center">
            <i class="fas fa-shake text-white text-sm"></i>
          </div>
          <span class="ml-3 text-gray-900">摇一摇</span>
          <i class="fas fa-chevron-right text-gray-400 ml-auto text-sm"></i>
        </div>

        <div class="flex items-center p-4 border-b border-gray-100">
          <div class="w-8 h-8 bg-wechat-green rounded flex items-center justify-center">
            <i class="fas fa-search text-white text-sm"></i>
          </div>
          <span class="ml-3 text-gray-900">搜一搜</span>
          <i class="fas fa-chevron-right text-gray-400 ml-auto text-sm"></i>
        </div>

        <div class="flex items-center p-4 border-b border-gray-100">
          <div class="w-8 h-8 bg-wechat-green rounded flex items-center justify-center">
            <i class="fas fa-map-marker-alt text-white text-sm"></i>
          </div>
          <span class="ml-3 text-gray-900">附近的人</span>
          <i class="fas fa-chevron-right text-gray-400 ml-auto text-sm"></i>
        </div>

        <div class="flex items-center p-4 border-b border-gray-100">
          <div class="w-8 h-8 bg-wechat-green rounded flex items-center justify-center">
            <i class="fas fa-shopping-bag text-white text-sm"></i>
          </div>
          <span class="ml-3 text-gray-900">购物</span>
          <i class="fas fa-chevron-right text-gray-400 ml-auto text-sm"></i>
        </div>

        <div class="flex items-center p-4">
          <div class="w-8 h-8 bg-wechat-green rounded flex items-center justify-center">
            <i class="fas fa-gamepad text-white text-sm"></i>
          </div>
          <span class="ml-3 text-gray-900">游戏</span>
          <i class="fas fa-chevron-right text-gray-400 ml-auto text-sm"></i>
        </div>
      </div>

      <div class="bg-white">
        <div class="flex items-center p-4">
          <div class="w-8 h-8 bg-wechat-green rounded flex items-center justify-center">
            <i class="fas fa-mobile-alt text-white text-sm"></i>
          </div>
          <span class="ml-3 text-gray-900">小程序</span>
          <i class="fas fa-chevron-right text-gray-400 ml-auto text-sm"></i>
        </div>
      </div>
    </div>

    <!-- 底部导航 -->
    <TabBar />
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import TabBar from '@/components/common/TabBar.vue'

const router = useRouter()

const openMoments = () => {
  router.push('/moments')
}
</script>
